<template>
  <view>
    <view class="modal" v-show="show">
      <view class="panel">
        <i class="iconfont icon-shanchu1" @click="onClose">X</i>
        <view class="graphics-back">

          <text class="graphics-Title">{{ time ? '请选择预约时间段' : '选择就诊人' }}</text>
          <view class="box" v-if="time">
            <view class="time" :class="index===key?'Have':''" @click="gettime(item,index)" v-for="(item,index) in time"
                  :key="index">{{ item }}
            </view>
          </view>
          <text class="graphics-Title">选择成员</text>
          <view class="patient-view">
            <image src="/static/other/touxiang.svg" mode="widthFix"></image>
            <text>{{ cart.name }}</text>
            <text @click="go">{{ time ? '选择成员' : '选择就诊人' }}</text>
          </view>
        </view>
        <button class="btn" @click="submit">提交预约</button>
        <view style="height: 50px;background-color: #fff"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {resphy} from "../../utils/API/homeapi";
import {regappoin} from "../../utils/API/registation";

export default {
  name: "loding",
  props: {
    show: Boolean,
    cart: Object,
    obj: Object,
    time: Array
  },
  data() {
    return {
      list: this.store.state.obj,
      key: -1
    };
  },

  methods: {
    onClose() {
      this.$emit('qie', false)
    },
    go() {
      wx.navigateTo({
        url: "/pages/patientoreder/patientoreder"
      })
    },
    gettime(item, index) {
      this.key = index
      this.$emit('timelist',item)
    },
    async submit() {
      //医生预约提交
      if (this.time) {
        console.log(this.obj)
        let data = await regappoin(this.obj)
        if (data.msg === "提交成功") {
          wx.navigateTo({
            url: '/pages/doctororder/doctororder'
          })
        }
      } else {
        let data = await resphy(this.obj)
        if (data.msg === "提交成功") {
          wx.navigateTo({
            url: '/pages/physicalorder/physicalorder'
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 有号 */
.Have {
  background-color: #0075ff !important;
  color: #ffffff !important;
}

.box {
  display: flex;
  height: 80px;
  align-items: center;
  width: 100%;
}

.time {
  width: 100px;
  height: 40px;
  border: 1px solid #ccc;
  color: #0d7cff;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}

.btn {
  background-color: #0d7cff;
  width: 95%;
  color: #fff;
}

.patient-view text:nth-child(2) {
  flex: 1;
  padding: 0 25px;
  font-weight: bold;
}

.patient-view text:nth-child(3) {
  color: #2c76ef;
}

.patient-view image {
  width: 60px;
  height: 60px;
}

//* 选择就诊人 */
.patient-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.graphics-Title {
  font-size: 17px;
  font-weight: bold;
  display: block;
  padding-bottom: 10px;
}

.graphics-back {
  background-color: #ffffff;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
}

.panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 150px;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

/* 可以直接对外部样式修改 */

.modal .icon-shanchu1 {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 10px;
  /* 为了增加点击区域大小 */
}
</style>
